import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import { runInAction, toJS } from 'mobx'
import { Tree, Input } from 'antd'
import styles from './Category.less'
import EditorPreView from '../../components/EditorPreView/EditorPreView.jsx'

const { TreeNode } = Tree;
const Search = Input.Search;
const getParentKey = (key, tree, parentKey) => {
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey.push(node.key);
      }
    }
  }
  return parentKey;
};

@inject('category')
@observer
class Category extends Component {


	componentDidMount() {
		this.props.category.doGetTree()
	}

	onExpand = (expandedKeys) => {
		console.log(expandedKeys)
		runInAction(() => {
			this.props.category.expandedKeys = expandedKeys
			this.props.category.autoExpandParent = false
		})
  }

  onChange = (e) => {
    const value = e.target.value;
    let expandedKeys = []
    this.props.category.dataList.forEach((item) => {
      if (item.title.indexOf(value) > -1) {
      	const a = getParentKey(item.key, this.props.category.gData, []);
        a && a.length > 0 && a.forEach(item => {
        	expandedKeys.push(item)
        })
      }
    })
    console.log(expandedKeys)
    runInAction(() => {
			this.props.category.expandedKeys = [...new Set(expandedKeys)]
			this.props.category.searchValue = value
			this.props.category.autoExpandParent = true

		})
  }

  onSelect = (selectKeys, info) => {
  	console.log(info)
  	selectKeys[0] && this.props.category.doGetArticleDetail(selectKeys[0])
  }


	render() {

		const { searchValue, expandedKeys, autoExpandParent } = this.props.category;
	  const loop = data => data.map((item) => {
	    const index = item.title.indexOf(searchValue);
	    const beforeStr = item.title.substr(0, index);
	    const afterStr = item.title.substr(index + searchValue.length);
	    const title = index > -1 ? (
	      <span>
	        {beforeStr}
	        <span style={{ color: '#f50' }}>{searchValue}</span>
	        {afterStr}
	      </span>
	    ) : <span>{item.title}</span>;
	    if (item.children) {
	      return (
	        <TreeNode key={item.key} title={title}>
	          {loop(item.children)}
	        </TreeNode>
	      );
	    }
	    return <TreeNode key={item.key} title={title} />;
	  });


		return (
			<div className="box" style={{overflow: "hidden"}}>
				<div className="shadow"></div>
				<div className="header">
					<div className="title">类目管理</div>
				</div>
				<div className={styles.content}>
				 	<div className={styles.left}>
						<Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
				        <Tree
				          onExpand={this.onExpand}
				          expandedKeys={this.props.category.expandedKeys}
				          autoExpandParent={this.props.category.autoExpandParent}
				          onSelect={this.onSelect}
				        >
		          			{loop(this.props.category.gData)}
		        		</Tree>
				 	</div>
				 	<div className={styles.right}>
				 		<EditorPreView article={{
							articleTitle: this.props.category.articleDetail.articleTitle || '',
							articleCreateTime: this.props.category.articleDetail.articleTime || '',
							articleCategory: this.props.category.articleDetail.articleTag || [],
							articleDesc: this.props.category.articleDetail.articleDesc || '',
							fuhtml: this.props.category.articleDetail.articleContent || ''
						}}></EditorPreView>
				 	</div>
				</div>
			</div>
		)
	}
}



export default Category